﻿<local:BasePage
    x:Class="TheVerge.Phone.Pages.SettingsPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:conv="clr-namespace:TheVerge.Phone.Converters"
    xmlns:local="clr-namespace:TheVerge.Phone.Pages"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    Background="{StaticResource PhoneBackgroundBrush}"
    mc:Ignorable="d"
    shell:SystemTray.IsVisible="True">
    <local:BasePage.Resources>
        <conv:FontSizePercantageToWinPhoneConverter x:Key="sizeConv" />
        <Style x:Key="txtHdrStyle" TargetType="TextBlock" BasedOn="{StaticResource PhoneTextSubtleStyle}">
            <Setter Property="Margin" Value="12,0,12,-12" />
        </Style>
        <DataTemplate x:Key="colorTemplate">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>
                <Rectangle Height="24" Width="24" Margin="2" Fill="{Binding Brush}" />
                <TextBlock Text="{Binding Name}" Margin="20,4" Grid.Column="1" />
            </Grid>
        </DataTemplate>
        <DataTemplate x:Key="colorFullTemplate">
            <Grid Margin="8,20">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>
                <Rectangle Height="48" Width="48" Margin="2" Fill="{Binding Brush}" />
                <TextBlock Text="{Binding Name}" Grid.Column="1" FontSize="32" Margin="20,4" />
            </Grid>
        </DataTemplate>
    </local:BasePage.Resources>

    <StackPanel Orientation="Vertical" Margin="12,17,0,12">
        <TextBlock Text="settings" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>

        <ScrollViewer HorizontalScrollBarVisibility="Disabled">
            <StackPanel>
                <CheckBox x:Name="cbUsePhoneTheme" Content="Use Phone Theme" Checked="UsePhoneTheme_Click" Unchecked="UsePhoneTheme_Click" />
                
                <TextBlock Text="Background" Style="{StaticResource txtHdrStyle}" Grid.Row="1" />

                <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
                    <RadioButton x:Name="btnDark" Content="Dark" Click="ChangeBackground_Click" IsEnabled="{Binding UsePhoneTheme, Converter={StaticResource invConv}}" />
                    <RadioButton x:Name="btnLight" Content="Light" Click="ChangeBackground_Click" IsEnabled="{Binding UsePhoneTheme, Converter={StaticResource invConv}}" />
                </StackPanel>

                <TextBlock Text="Accent color" Style="{StaticResource txtHdrStyle}" />
                <toolkit:ListPicker x:Name="accentColors" ExpansionMode="FullScreenOnly"
                                    BorderBrush="{StaticResource PhoneForegroundBrush}" BorderThickness="4"
                                    FullModeHeader="accents"
                                    FullModeItemTemplate="{StaticResource colorFullTemplate}"
                                    MouseLeftButtonDown="AccentColors_MouseLeftButtonDown"
                                    IsEnabled="{Binding UsePhoneTheme, Converter={StaticResource invConv}}"
                                    ItemTemplate="{StaticResource colorTemplate}" />

                <TextBlock Text="Supported Orientation" Style="{StaticResource txtHdrStyle}" />
                <toolkit:ListPicker x:Name="lpOreintations" />

                <TextBlock Text="{Binding FontSize, StringFormat='Article Font Size: {0:0}%'}" Style="{StaticResource PhoneTextSubtleStyle}" />
                <Slider 
                    Maximum="{Binding FontSizeMaximum}" 
                    Minimum="{Binding FontSizeMinimum}"
                    Value="{Binding FontSize, Mode=TwoWay}" LargeChange="1" SmallChange="1"
                    Margin="{StaticResource PhoneMargin}" />

                <Border BorderBrush="{StaticResource PhoneChromeBrush}" BorderThickness="1.5" Margin="12,-24,12,0">
                    <TextBlock Text="Sample article body text" TextWrapping="Wrap"
                               FontSize="{Binding FontSize, Converter={StaticResource sizeConv}}" HorizontalAlignment="Center" />
                </Border>
            </StackPanel>
        </ScrollViewer>
    </StackPanel>
</local:BasePage>